<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../../favicon.ico">
    <title>accounts</title>

    <link th:href="@{/webjars/bootstrap/4.2.1/css/bootstrap.css}" rel="stylesheet">

    <link th:href="@{/css/bills.css}" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
    <!--<div th:replace="common::warning-frame"></div>-->
    <!--<div class="alert alert-warning" role="alert" th:if="${errorMsg != null}" th:fragment="warning-frame">[[${errorMsg}]]-->
    </div>
    <div th:replace="common::navBar"></div>
    <div class="row">
        <div th:replace="common::sideBar"></div>

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
            <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3">
                <h1 class="h2">流水详情</h1>
                <div class="btn-toolbar mb-2 mb-md-0">
                    <div class="btn-group mr-2">
                        <a href="#" th:href="@{'/goToBills?userId=1'}" class="btn btn-sm btn-success">主页</a>
                    </div>
                </div>
            </div>

            <!--<canvas class="my-4" id="myChart" width="900" height="380"></canvas>-->

            <!--<h2>账号列表</h2>-->
            <div class="table-responsive">
                <table class="table table-striped table-sm">
                    <thead>
                        <tr>
                            <th>年份</th>
                            <th>月份</th>
                            <th>名目</th>
                            <th>金额</th>
                            <th>凭证</th>
                            <th>类型</th>
                            <th>备注</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                    <tr th:each="account : ${runningAccount.getList()}">
                        <td>[[${account.occurYear}]]</td>
                        <td>[[${account.occurMonth}]]</td>
                        <td>[[${account.name}]]</td>
                        <td>[[${account.price}]]</td>
                        <td>[[${account.imageUrl}]]</td>
                        <td>[[${account.billType==1?'收入':'支出'}]]</td>
                        <td>[[${account.remark}]]</td>
                        <td>
                            <a class="btn btn-success btn-sm" th:href="@{'/account?id=' + ${account.id}}">详情</a>
                            <button class="btn btn-danger btn-sm deleteBtn"
                                    th:attr="del_uri=@{'/delAccount?id=' + ${account.id} + '&userId=1&year=' + ${account.occurYear} + '&month=' + ${account.occurMonth}}">删除
                            </button>
                            <!--<a class="btn btn-success btn-sm" th:href="@{'/goToRunningAccount/userId=1&year=' + ${bill.occurYear} + '&month=' + ${bill.occurMonth}}">详情</a>-->
                        </td>
                    </tr>
                    </tbody>
                </table>
                <form id="delForm" method="post">
                    <input type="hidden" name="_method" value="delete"/>
                </form>
            </div>
        </main>
    </div>
</div>


<script th:src="@{/webjars/jquery/3.3.1-1/jquery.js}"></script>
<script th:src="@{/webjars/bootstrap/4.2.1/js/bootstrap.js}"></script>
<script>
    $(".deleteBtn").click(function () {
        $("#delForm").attr("action", $(this).attr("del_uri")).submit();
        return false;
    })
</script>
</body>
</html>